<template>
  <div class="prepare-list">
    <div class="prepare-tips">请选择本阶段课次，已经生成过阶段测评报告的无法再次选择了。</div>
    <el-table :data="prepareList" @selection-change="getSelection">
      <el-table-column type="selection" :selectable="checkSelectable"></el-table-column>
      <el-table-column label="名称" prop="handoutName"></el-table-column>
      <el-table-column label="上课时间" prop>
        <template #default="scope">{{filterTime(scope.row)}}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import $ from "$";
import Moment from "moment";
import { ElMessage } from "element-plus";
export default {
  props: {
    data: {
      type: Object,
      default: {},
    },
    disabledList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  setup(props) {
    let prepareList = ref([]);
    let selection = ref([]);
    const getPrepareList = async () => {
      let res = await $.http.post("/admin/lessonSummary/querySummaryToReport", {
        status: 1,
        searchType: props.data.searchType,
        orderType: 1,
        studentId: props.data.studentId,
      });
      res.result && (prepareList.value = res.json);
      console.log(!res.result);
      !res.result && ElMessage.error(res.msg);
    };
    getPrepareList();
    const filterTime = (data) => {
      return `${Moment(data.startTime).format("YYYY年MM月DD日 HH:mm")}-${Moment(
        data.endTime
      ).format("HH:mm")}`;
    };
    const getSelection = (list) => {
      selection.value = list.map((e) => {
        return e.id;
      });
    };
    const checkSelectable = (row) => {
      return !props.disabledList.find((e: any) => e.lessonId === row.id);
    };
    const save = (resolve, reject) => {
      if (selection.value.length < 1)
        return ElMessage.warning("请选择备课数据！");
      resolve(selection.value);
    };
    return {
      prepareList,
      getPrepareList,
      filterTime,
      getSelection,
      selection,
      checkSelectable,
      save,
    };
  },
};
</script>

<style scoped lang="scss">
.prepare-list {
  margin: -15px -28px -28px;
  > .prepare-tips {
    padding: 10px 20px;
    background: #fef6e6;
    color: #b48e41;
  }
}
</style>
